<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>svg描边动画2</title>

    <style>
        .p {
            fill: none;
            /*线长度*/
            stroke-dasharray: var(--length);
            /*偏移量*/
            stroke-dashoffset: var(--offset);
            stroke: #00dc82;
            /*描边宽度*/
            stroke-width: 2px;
            animation: line 2s linear forwards;
        }

        @keyframes line {
            to {
                stroke-dashoffset: 0;
            }
        }
    </style>
</head>
<body>
<svg class="icon" width="400" height="400">
    <line class="p" x1="0" y1="50%" x2="100%" y2="50%"/>
    <circle class="p" cx="50%" cy="50%" r="40" fill="none"/>
    <!-- 定义路径 -->
    <path class="p" id="textPath" d="M20,100 C100,20 180,180 280,100" fill="none" stroke="none"/>

    <!-- 使用路径显示文字 -->
    <text class="p" font-size="24" fill="black">
        <textPath href="#textPath" startOffset="50%">
            Anytime
        </textPath>
    </text>

    <path class="p" d="M20,50 L40,50 L40,100 L20,100 Z" fill="black"/> <!-- 简化的A字母部分 -->
    <path class="p" d="M60,50 L80,50 L80,100 L60,100 Z" fill="black"/> <!-- 简化的N字母部分 -->
</svg>
<script>
    let p = document.querySelectorAll('.p');
    // 获取线长度
    p.forEach(item => {
        let length = item.getTotalLength();
        item.style.setProperty('--length', length);
        item.style.setProperty('--offset', length);
    })
</script>
</body>
</html>